<template>
	<layout :loading="loading" pageKey="navbar" title="导航列表">
	
		<block slot="titleLeft">
			<view :title="isSlideUp ? '展开导航' : '收起导航'" class="hover plr15" :class="isSlideUp ? 'bIcon-showAll' : 'bIcon-hideAll'" @tap="toggleAll"></view>
		</block>
		<block slot="titleRight">
			<auth-nav href="/pages/navbar/edit" url="admin/navbar/info" class="btn w80 flex">
				<text class="bIcon-addCircle mr5"></text>
				添加
			</auth-nav>
		</block>		
		<tables :list="list" :showEmpty="true">
			<block slot="thead">
				<th>名称</th>
				<th>图标</th>
				<th>url</th>
				<th>序号</th>				
				<th>显示状态</th>
				<th>操作</th>
			</block>
			<block slot="tbody">
				<block v-for="( x , index) in list" :key="x._id" v-if="x.parent_id==''">					
					<tr>
						<td class="main bold hover" @tap="x.isSlideUp=!x.isSlideUp">
							<view class="flex">
								<view>
									{{x.name}}
								</view>
								<view class="fz12 gray normal op3 pl10" :class="x.isSlideUp?'bIcon-arrowRight':'bIcon-arrowDown'"></view>
							</view>							
						</td>
						<td><image :src="x.icon" class="h50 w50" ></image></td>
						<td>{{x.url}}</td>
						<td>
						   {{x.sort}}
						</td>
						<td :class="x.isshow ? '' : 'gray' ">
							{{x.isshow ? '显示' : '隐藏'}}
						</td>
						<td>
							<auth-nav :href="`/pages/navbar/edit?id=${x._id}`" url="admin/navbar/info" class="main bold plr5">
								编辑
							</auth-nav>
							<auth-btn :url="`admin/navbar/delete?id=${x._id}`" confirm="delete" @success="remove(index)" class="main bold plr5">
								删除
							</auth-btn>
							
						</td>
					</tr>
					<block v-for="( s , sIndex) in list" :key="s._id" v-if="s.parent_id == x._id && !x.isSlideUp">						
						<tr>
							<td  @tap="s.isSlideUp=!s.isSlideUp"> 
								<view class="hover">
									<text class="bIcon-right fz12 grey mr5 ml10"></text>
									<text class="bold black">
										{{s.name}}
									</text>
								</view>
							</td>
							<td><image :src="x.icon" class="h50 w50" ></image></td>
							<td>
								{{s.url}}
							</td>
							<td>
								  {{x.sort}}
							</td>													
							<td :class="s.isshow ? '' : 'gray' ">
								{{s.isshow ? '显示' : '隐藏'}}
							</td>
							<td>
								<auth-nav :href="`/pages/navbar/edit?id=${x._id}`" url="admin/navbar/info" class="main bold plr5">
									编辑
								</auth-nav>
								<auth-btn :url="`admin/navbar/delete?id=${x._id}`" confirm="delete" @success="remove(index)" class="main bold plr5">
									删除
								</auth-btn>
							</td>
						</tr>
						
					</block>
					
				</block>
			</block>
		</tables>
		
	</layout>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				loading: true ,
				isSlideUp: false ,
				action: "admin/navbar/list",
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			toggleAll:function(e){
				this.isSlideUp = !this.isSlideUp ;
				this.list.forEach(item=>{
					item.isSlideUp = this.isSlideUp ;
				})
			},
			
			toggle:function(index){
				this.$set(this.list[index],'isSlideUp' , !this.list[index].isSlideUp);
			},
			
			getList:function(e){
				if (!this.loading) {
					uni.showLoading({
						title:"加载中…"
					});
				}							
				this.bcc.callInCache({
					url : this.action ,
					success : e => { 
						this.list = e.list.map(item=>{
							item.isSlideUp = false ;
							return item ;
						}) ;
						
						this.loading = false ;
						uni.hideLoading();
					}
				});
			},
			remove:function(index){
				this.bcc.clearCache(this.action);
				this.list.splice(index,1);
				uni.showToast({
					title: '已删除',
					icon : 'success'
				});
			},
		}
	}
</script>

<style>

</style>
